<template>
    <div class="search-box">
        <div class="search-left">
            <i class="iconfont icon-message"></i>
        </div>
        <div class="search-input">
            <router-link to="/search" tag="input" type="text" placeholder="汉服"></router-link>
            <!-- <input type="text" placeholder="     男士长靴"> -->
        </div>
        <div class="search-right">
            <router-link to="/cart" tag="i" class="iconfont icon-cart"></router-link>
            <!-- <i class="iconfont icon-cart"></i> -->
        </div>
    </div>
</template>

<style lang="less" scoped>
//首页头部搜索栏样式
.search-box {
    position:fixed;
    top:0;
    width:100%;
    z-index:99;
    box-sizing:border-box;
    height: @height;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: @white;
    > .search-left {
        flex: 1;
        text-align: center;
        cursor:pointer;
        > i {
            font-size: 0.5rem;
            font-weight: bold;
            color: @dark;
            opacity:0.7;
        }
    }
    > .search-input {
        flex: 3;
        box-sizing:border-box;
        // padding: 0rem 0.2rem;
        > input[type="text"] {
            width: 100%;
            height: @topHeight - 0.4rem;
            border: none;
            box-sizing:border-box;
            border-radius:10px;
            background-image: url("");
            background-size: 0.4rem;
            background-repeat: no-repeat;
            background-color: @gray-ee;
            background-position: left center;
            padding-left:0.4rem;
            &:focus{
                background-image:none;
                outline:none;
            }
        }
    }
    > .search-right {
        flex: 1;
        text-align: center;
        cursor:pointer;
        > i {
            font-size: 0.5rem;
            font-weight: bold;
            color: @dark;
            opacity:0.7;
        }
    }
}
</style>